<template>


	<view class="all">
		<view class="ym"></view>
		<view class="yt"></view>
		<uni-row class="demo-uni-row" width="nvueWidt">
			<uni-col :span="12">
				<view class="demo-uni-col dark">大理古城之行</view>
			</uni-col>
			<uni-col :span="12">
				<view class="demo-uni-col light" @click="showDrawer('showLeft')">切换路线</view>
			</uni-col>
		</uni-row>

		<!-- <view class="c">
		<scroll-view class="left" scroll-x="true">
			<view class="a">选择城市</view>
			<view class="a">昆明</view>
			<view class="a">西双版纳</view>
			<view class="a">大理</view>
			<view class="a">红河</view>
			<view class="a">丽江</view>
			<view class="a">香格里拉</view>
			<view class="a">你好</view>
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view> 
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view>
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view>
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view>
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view>
			<view class="a">你好</view>
			<view class="a">hhh</view>
			<view class="a">znjsk</view>
			<view class="a">你好</view>
		</scroll-view>
			</view> -->
		<!-- 右边 -->
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
				<view id="demo1" class="scroll-view-item_H " v-for="(item,index) in lxgh" :key="item.inedx" @click="tz(index)">第{{index+1}}天</view>
				<!-- <view id="demo2" class="scroll-view-item_H "> 第二天</view>
				<view id="demo3" class="scroll-view-item_H ">第三天</view>
				<view id="demo1" class="scroll-view-item_H ">第四天</view>
				<view id="demo2" class="scroll-view-item_H ">第五天</view>
				<view id="demo3" class="scroll-view-item_H ">第六天</view> -->
			</scroll-view>
		</view>
		<view class="uni-common-pb"></view>

		<scroll-view class="right" scroll-y>


			<!-- <navigator url="../pathxq/pathxq">
				<view class="item">
				<text class="b">大理古城</text>
			</view>
			</navigator> -->

			<!-- <uni-steps :options="list2" active-color="#cc99ff" :active="active" direction="column"/>
			</uni-section>
			<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="changeArea()">改变状态</button> -->
           <!-- <uni-section title="第一站" type="line"  > -->
			<uni-card :title="item.name" sub-title="good time" extra="建议游玩时长:200min" :thumbnail="avatar" @click="onClick" v-for="(item,index) in lx" :key="item.index" >
				<text class="uni-body">{{item.add}}</text>
			</uni-card>
		<!-- </uni-section> -->


		</scroll-view>


		<!-- <view>
			
			<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				
			</map>
			
		</view>
		 -->
		<!-- <uni-section title="我的旅行路线:" type="line" padding>
					<uni-steps :options="list1" :active="active" />
				</uni-section>
				<button type="primary"  style="margin: 30px 10px; width: 100px;" @click="change">下一天</button> -->
		<uni-drawer ref="showLeft" mode="left" :width="220" @change="change($event,'showLeft')">
			<view class="close">
				<!-- <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button> -->
				<text>选择旅行路线</text>
				<uni-list>

					<uni-list-item title="昆明-大理之行" note="2022.7.20" showArrow to="../pathlx/pathlx"
						thumb="../../static/14.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="丽江之行" note="2022.7.21" showArrow to="../pathlxx/pathlxx"
						thumb="../../static/11.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="大理之行" note="2022.7.22" showArrow to="../pathlx/pathlx"
						thumb="../../static/12.gif" thumb-size="base" rightText="切换" />
					<uni-list-item title="香格里拉之行" note="2022.7.24" showArrow to="../pathlxx/pathlxx"
						thumb="../../static/13.gif" thumb-size="base" rightText="切换" />

				</uni-list>
			</view>
		</uni-drawer>

		<!-- <view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view> -->
		<!-- <view>
		<view class="content">
			<view v-if="current === 0">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
			<view v-if="current === 1">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
			<view v-if="current === 2">
				<view>
					<uni-steps :options="list2" active-color="#007aff" :active="active" direction="column" />
					<button type="primary" size="mini" style="margin: 30px 10px; width: 100px;"
						@click="changeArea">改变状态</button>

				</view>
			</view>
		</view>
		</view> -->
		<view class="dbdh">
			<view style="width: 50px;padding-top: 5px;">
				<uni-icons type="plusempty" size="20"></uni-icons>
				<view>新建</view>
				
			</view>
			<view style="width: 50px;padding-top: 5px">
				<uni-icons type="redo" size="20"></uni-icons>
				<view>发布</view>
			</view>
			<view style="width: 50px;padding-top: 5px">
				<uni-icons type="trash" size="20"></uni-icons>
				<view>删除</view>
			</view>
			<view class="nn" @click="ks()">
				<text>开始</text>
				<!-- <button>{{xczt}}</button> -->
				</view>
			<view class="nnn" @click="js()">
				<text>结束</text>
				<!-- <button>{{xczt}}</button> -->
				</view>
			

			<!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" /> -->
				

		</view>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				xczt:"开始行程",
				// ys1:"#99ccff",
				ts:0,
				lx:[
				// 				{
				// 					"name": "丽江古城",
				// 					"add": "100.235517,26.870507",
				// 					"time": 100
				// 				},
				// 				{
				// 					"name": "丽江古城",
				// 					"add": "100.235517,26.870507",
				// 					"time": 100
				// 				}
				
							],
				// lx1:[{
				// 					"name": "丽江古城",
				// 					"add": "100.235517,26.870507",
				// 					"time": 100
				// 				},
				// 				{
				// 					"name": "丽江古城",
				// 					"add": "100.235517,26.870507",
				// 					"time": 100
				// 				}],
				// lx2:[{
				// 					"name": "普达措国家公园\n",
				// 					"add": "99.951808,27.856299",
				// 					"time": 70
				// 				}],
				// lx3:[{
				// 					"name": "禄丰世界恐龙谷",
				// 					"add": "102.074915,24.972664",
				// 					"time": 90
				// 				}],
				// lx4:[{
				// 					"name": "禄丰世界恐龙谷",
				// 					"add": "102.074915,24.972664",
				// 					"time": 90
				// 				}],
				// lx5:[],
				// lx6:[],
				// lx7:[],
				// lx8:[],
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
								avatar: '../../static/15.jpg',
								extraIcon:{
									color: '#4cd964',
									size: '22',
									type: 'gear-filled'
								},
				nvueWidth: 730,
				lxgh:[
							[
								{
									"name": "丽江古城",
									"add": "100.235517,26.870507",
									"time": 100
								},
								{
									"name": "丽江古城",
									"add": "100.235517,26.870507",
									"time": 100
								}
							],
							[
								{
									"name": "普达措国家公园\n",
									"add": "99.951808,27.856299",
									"time": 70
								}
							],
							[
								{
									"name": "禄丰世界恐龙谷",
									"add": "102.074915,24.972664",
									"time": 90
								}
							],
							[
								{
									"name": "禄丰世界恐龙谷",
									"add": "102.074915,24.972664",
									"time": 90
								}
							]
							

				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/c10.png',


				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/c10.png'
				}],
				// active: 1,
				// 				list1: [{
				// 					title: '第一天'
				// 				}, {
				// 					title: '第二天'
				// 				}, {
				// 					title: '第三天'
				// 				}, {
				// 					title: '第四天'
				// 				}],
				items: ['第一天', '第二天', '第三天'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				active: 1,
				
				showRight: false,
				showLeft: false,
				options: [{
					icon: 'compose',
					text: '编辑'
				}, {
					icon: 'redo',
					text: '分享',

					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'heart',
					text: '喜欢',

				}],
				customButtonGroup: [{
					text: '开始行程',
					backgroundColor: 'linear-gradient(90deg, #ccffcc, #9999ff)',
					color: '#fff',
					},
				
				{
					text: '结束行程',
					backgroundColor: 'linear-gradient(90deg, #9999ff, #ccffcc)',
					color: '#fff'
				}
				],
			}

		},
		methods: {
			tz(index){
				console.log(index)
				this.lx=this.lxgh[index]
				console.log(this.lx)
				
				
			},
			ks(){
				console.log(2211311)
				uni.showToast({
					title: '行程开始啦~',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'checkmarkempty',
					//显示持续时间为 2秒
					duration: 2000
				})
				// uni.showModal({
				// 		title: '提示',
				// 		// 提示文字
				// 		content: '确认开始行程吗？',
				// 		// 取消按钮的文字自定义
				// 		cancelText: "取消",
				// 		// 确认按钮的文字自定义
				// 		confirmText: "确定",
				// 		//删除字体的颜色
				// 		confirmColor:'#99ccff',
				// 		//取消字体的颜色
				// 		cancelColor:'#000000',
				// 		success: function(res) {
				// 		if (res.confirm) {
				// 			// this.xczt="结束行程"
				// 			// 执行确认后的操作
				// 		} 
				// 		else {
				// 			// 执行取消后的操作
				// 			return;
				// 		}
				// 	}
				// })
				
			},
			js(){
				console.log(2211311)
				// uni.showToast({
				// 	title: '正在生成微记~',
				// 	//将值设置为 success 或者直接不用写icon这个参数
				// 	icon: 'chatbubble',
				// 	//显示持续时间为 2秒
				// 	duration: 2000
				// })
				uni.navigateTo({
					url:'./wj'
				})
			},
			// onClick(e){
			// 				console.log(e)
			// 				uni.navigateTo({
			// 					url:'../pathxq/pathxq?id=1'
			// 				})
			// 			},
						
						// actionsClick(text){
						// 	uni.showToast({
						// 		title:text,
						// 		icon:'none'
						// 	})
						// },
			// changeArea() {
			// 	if (this.active < this.list2.length - 1) {
			// 		this.active += 1
			// 	} else {
			// 		this.active = 0
			// 	}
			// },
			// onClickItem(e) {
			// 	if (this.current !== e.currentIndex) {
			// 		this.current = e.currentIndex
			// 	}
			// },

			Left() {
				uni.navigateBack({
					url: "../path/path"
				})
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左 窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			buttonClick(e) {
				console.log(123)
				this.options[2].info++
					uni.navigateTo({
						url:'./wj',
						fail(res) {
                          console.log(res)							
						}
					})
					console.log(1234)
				
			},
			// onClick(e) {
			// 	uni.showToast({
			// 		title: `点击${e.content.text}`,
			// 		icon: 'none'
			// 	})
			// },
		
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		upper: function(e) {
			console.log(e)
		},
		lower: function(e) {
			console.log(e)
		},
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop: function(e) {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			uni.showToast({
				icon: "none",
				title: "纵向滚动 scrollTop 值已被修改为 0"
			})

		},
		onload() {
			
		},
		onShow(){
			this.lx=this.lxgh[0]
		console.log(this.lx)
		}
		
		

}
	}
</script>

<style>
	

	.uni-common-mt {
		margin-top: 30px;
		/* background-color: #ffffff; */
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
		/* background-color: #ffffff; */
	}

	.box-bg {

		padding: 5px 0;
		background-color: #ffffff;
		text-align: center;
		width: 100%;

	}

	.bt {
		font-size: 35rpx;
		letter-spacing: 10px;
		line-height: 50px;
		border-bottom: 2px solid #99ccff;

		font-weight: 200;
		width: 100%;
	}

	.qhlx {
		font-size: 30rpx;
		line-height: 40px;
		width: 100%;
		border-bottom: 2px solid #99ccff;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}

	/* .dbdh {
		width: 100%;
		position: fixed;
		bottom: 0px;
	}
 */
	page {
		background-image: url('@/static/14.jpg');
		background-size: 100%;
	}

	.ym {
		width: 100%;
		height: 200px;
	}

	.yt {
		width: 100%;
		height: 30px;
		background-color: #fff;
		border-radius: 60px 60px 0 0;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		background-image: linear-gradient(90deg,#ccffff, #ccccff);
		/* border-radius: 20%; */

		/* background-image: url('@/static/12.jpg');
				background-size:200%; */
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 33.3%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: '楷体';
		/* background-color: #fff; */
		border-right: 1px solid #eee;
		border-radius: 10px;
		/* background-image: linear-gradient(90deg,#ffffff,#ccccff); */
	}

	page {
		width: 100%;
		height: 100%;
	}

	.all {
		height: 100%;
		width: 100%;
		/* display: flex; */
	}

	/* .c{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;	
	} */
	.left {
		white-space: nowrap;

		width: 100%;
		height: 100px;
		border-bottom: 1px solid #eee;

	}

	.a {
		height: 50px;
		width: 100px;
		line-height: 50px;
		color: #333;
		font-size: 35rpx;
		border-top: 1px solid #eee;
		text-align: center;
		background-color: #fff;
	}

	.active {
		background-color: aliceblue;

	}

	.right {
		height: 473px;
		width: 100%;
		margin-bottom: 50px;
		background-color: #fff;
		/* display: flex; */
		/* flex-wrap: wrap; */
		/* justify-content: space-between; */

	}

	.item {
		width: 240rpx;
		height: 240rpx;
		background-image: url('@/static/01.jpg');
		background-size: 150%;
		display: block;

		margin-left: 5px;
		margin-top: 20px;
		margin-right: 5px;
		margin-bottom: 10px;
		border-radius: 8%;

	}

	.b {
		font-size: 35rpx;
		margin: 15px;

	}

	.dbdh {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 20rpx;
		/* line-height: 50px; */
		background-color:#ffffff;
		display: flex;
		border-top:1px solid #999999 ;
	}

	.dbdh2 {
		position: fixed;
		bottom: 50px;
		width: 100%;
		background-color: #fff;
		color: cornflowerblue;
	}

	.d {
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background-color: #fff;
	}

	.demo-uni-row {
		/* margin-bottom: 10px; */

		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		/* margin-bottom: 10px; */
	}

	/* #endif */

	.demo-uni-col {
		height: 50px;

	}

	.dark_deep {
		/* background-color: #99a9bf; */
	}

	.dark {
		background-color: #fff;
		font-size: 35rpx;
		letter-spacing: 5px;
		line-height: 50px;
		padding-left: 15px;
	}

	.light {
		background-color: #fff;
		text-align: right;
		line-height: 50px;
		padding-right: 10px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* padding: 5rpx 10rpx 0; */
		overflow: hidden;
	}
	.nn{
		width: 130px;
		height: 40px;
		/* background-color: this.ys1; */
		background-image: linear-gradient(90deg, #ccffff, #99ccff);
		border-radius: 15px;
		
		margin-top: 5px;
		margin-left: 12px;
		text-align: center;
		line-height: 40px;
		font-size: 30rpx;
		
	}
	.nnn{
		width: 130px;
		height: 40px;
		/* background-color: this.ys1; */
		background-image: linear-gradient(90deg, #99ccff, #ccccff);
		border-radius: 15px;
		margin-top: 5px;
		margin-right: 12px;
		text-align: center;
		line-height: 40px;
		font-size: 30rpx;
	}
</style>
